<template>
	<view>
		<view class="top">
			<text>{{userInfo.userName}}</text>
			<view class="msg" v-for="(item,index) in stbinfoList" :key="index">
				<text>{{item.stbno}}</text>
				<text v-if="item.mothercardflag==='0'">主机</text>
				<text v-else>副机</text>
				<text v-if="item.cardflag==='0'">高清</text>
				<text v-else>标清</text>
			</view>
		</view>
		<view class="section" v-for="(item,index) in productList" :key="index">
			<view class="content"  @tap="details(item)">
				<view class="content-left">
					<image  v-if ="item.imgLoaded" :src ="getBusinessImagUlr(item.imageUrl)" ></image>
					<image  v-if ="!item.imgLoaded" src="/static/images/load_fial_image.png" />
				</view>
				<view class="content-right">
					<view class="content-right-top">
						<text>{{item.productName}}</text>
						<!-- <view class="give" v-if="item.productId==1">
							<text>买两年 送华城</text>
						</view> -->
					</view>
					<text>{{item.description}}</text>
					<view class="content-money">
						<view class="content-money-left">
							<text>主机</text>
							<view class="money">￥{{item.pricePerMonth}}/月</view>
						</view>
						<view class="content-money-left">
							<text>副机</text>
							<view class="money">￥{{item.subPricePerMonth}}/月</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	import apis from '../../api.js'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				name:'陈翊萱',
				card:'173510001489999',
				state:'主机',
				definition:'标清',
				productId:'',
				stbinfoList:[],
				productList:[],
				productImages:{},
				imgFlsh:0,
				itemList:[],
				code:''
				// dataList:[
				// 	{	
				// 		type:1,
				// 		name:'基本包',
				// 		attention:'请注意：高清机顶盒才能观看高清频道',
				// 		money:'20.00',
				// 		othermonry:'5.00'
				// 	},
				// 	{
				// 		type:0,
				// 		name:'华诚影视体验包',
				// 		attention:'请注意：高清机顶盒才能观看高清频道',
				// 		money:'20.00',
				// 		othermonry:'5.00'
				// 	}
				// ]
			}
		},
		computed: {
			...mapState(['userInfo']), //对全局变量hasLogin进行监控
		},		
		onLoad() {
			var that=this
			/* 戴工修改了code需要用登录返回的
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 获取用户信息
					console.log(loginRes)
					that.code=loginRes.code
					console.log(that.code)
					//that.Productlist()
				}
			});
			*/
			that.code = that.userInfo.wechat
			that.Productlist()
			this.stbinfoList=this.userInfo.stbInfo
		},
		onShow(){
			console.log('ProductList:')
			console.log(this.productImages)
		},
		// onReady() {
		// 	console.log(this.code)
		// 	apis.Productlist({
		// 		"nitId":this.userInfo.netId,
		// 		"code":this.code
		// 	}).then(res=>{
		// 		//console.log(res)
		// 		this.productList=res[1].data.content
		// 	})
		// },
		methods: {
			Productlist(){
				var self = this;
				let param = {
					nitId: self.userInfo.netId,
					code: self.userInfo.wechat					
				};
				let options = {
					url:httpRequest.requestUrl.getOrderbyCode,
					method:httpRequest.requestMethod.GET,
					datas:param
				}
				httpRequest.Request(options).then(res => {
					console.log(res)
					if (res.data.status == 200 && res.data.content) {
						self.productList = res.data.content;
						uni.setStorageSync('productList', self.productList);
						for(var i=0; i < self.productList.length; i++){
							var ret = self.firstBusinessImagUlr(self.productList[i].imageUrl);
							if(ret == true){
								self.productList[i].imgLoaded = true;
							}
						}
					}					
				})
			},
			firstBusinessImagUlr(icon){
				console.log('图片下载')
				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				
				var tempImagePath = uni.getStorageSync('tempImagePath');
				if (tempImagePath && tempImagePath[icon]) {
					iconObj.path = tempImagePath[icon];
					iconObj.loaded = true;										
				} 
				else {
					let options = {
						url:httpRequest.requestUrl.imageUrl + icon						
					};
					
					httpRequest.DownloadFile(options).then(res => {						
						if(res.statusCode == 200){							
							var tempImagePath = uni.getStorageSync('tempImagePath');
							if (tempImagePath && tempImagePath[icon]) {								
							    iconObj.path = tempImagePath[icon];
							    iconObj.loaded = true;	
								for(var i=0; i< self.productList.length; i++){
									if(self.productList[i].imageUrl == icon){
										self.productList[i].imgLoaded = true;
										++self.imgFlsh;
										break;
									}
								}																	
							}							
						}						
					})
				}
				if(!self.productImages[icon])
				{
					self.productImages[icon] = iconObj;
				}
				if(self.productImages[icon].path != iconObj.path)
				{
					self.productImages[icon].path = iconObj.path;
				}
				if(self.productImages[icon].loaded != iconObj.loaded)
				{
					self.productImages[icon].loaded = iconObj.loaded;
				}
				return self.productImages[icon].loaded;
			},
			getBusinessImagUlr(icon){
				console.log('图片获取')
				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				
				if(!self.productImages[icon])
				{
					self.productImages[icon] = iconObj;
				}
				
				return self.productImages[icon].path;
			},
			details(e){
				let that=this
				that.productId=e.productId
				that.itemList = e
				//console.log(that.itemList)
				uni.navigateTo({
					url:'../businessDetails/businessDetails?productId=' + that.productId + '&itemList=' + encodeURIComponent(JSON.stringify(that.itemList))
				})
			}
		}
	}
</script>

<style scoped>
.top{
	width: 100%;
	height: 280rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #00B9EF;
	color: #FFFFFF;
	font-size: 34rpx;
}
.msg{
	width: 428rpx;
	height: 40rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.section{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.content{
	width: 95%;
	height: 240rpx;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	align-items: center;
}
.content-left{
	width: 220rpx;
	height: 240rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.content-left image{
	width: 260rpx;
	height: 180rpx;
}
.content-right{
	width: 540rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding-left: 10rpx;
}
.content-right-top{
	width: 90%;
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content-right-top>text{
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.give{
	width: 152rpx;
	height: 34rpx;
	background: #FF0000;
	opacity: 1;
	border-radius: 6rpx;
	text-align: center;
	line-height: 34rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.content-right>text{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #A9A9A9;
}
.content-money{
	width: 90%;
	height: 60rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content-money-left{
	width: 50%;
	height: 52rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.content-money-left text{
	width: 72rpx;
	height: 52rpx;
	border: 2rpx solid #C5C5C5;
	opacity: 1;
	border-radius: 4rpx;
	text-align: center;
	line-height: 52rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #00B9EF;
}
.money{
	width: 152rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 40rpx;
	color: #FF1F1F;
	opacity: 1;
}
</style>
